<template>
	<div>
		<div class="goods-search-list-nav">
			<ul id="nav_ul">

				<li>
					<a class="up">销量</a>
				</li>
				<li>
					<a class="current up">价格<i></i></a>
				</li>
				<li>
					<a class="up">新品</a>
				</li>
				<li>
					<a class=" up">全部分类</a>
				</li>
			</ul>
			<div class="browse-mode">
				<a id="show_style"><span class="browse-grid"></span></a>
			</div>
		</div>

		<div class="nlistDiv" style="width:100%;max-width:620px;margin:0px auto;padding-top:35px;">
			<div class="listDiv" style=" width:100%; margin:0px auto">

				<scroll-view scroll-y="true" @scrolltolower="scrollLoading" class='scrollarea'>
					<ul class="listul" style="margin-top:0p;display: block;" id="goodslist">

						<li v-for="(i,index) in classlist" :key="index">

							<div class="prodiv">
								<div class="imgdiv" style=" position:relative; z-index:5">
									<a :href="'/pages/fprod/main?id='+i.id">
										<img :src="'https://tp5.blver.cn'+i.goods_image">
									</a>
								</div>
								<a :href="'/pages/fprod/main?id='+i.id">
									<div class="proname">
										{{i.goods_title}} </div>
									<div class="prodesc">
										{{i.goods_cailiao}} </div>
								</a>
								<div class="protext">
									<div class="proprice">
										￥{{i.selling_price}}元 </div>
									<div class="addcart">
										<a :href="'/pages/fprod/main?id='+i.id">
											购买
										</a>
									</div>
								</div>
							</div>
						</li>

					</ul>
				</scroll-view>
			</div>
		</div>
		
		
		<view class="abnor" v-if="isshowempty">
			<view class="abnor__box">
				<image class="abnor__image" mode="widthFix" src="https://s10.mogucdn.com/p2/161213/upload_74hhee883cbf190e3di6cljk23679_514x260.png" style="height: 110.778px;">
				</image>
				<view class="abnor__text">没有找到对应商品哦！~</view>
				
			</view>
		</view>
	</div>
</template>

<script>
	import { requests } from "../../../static/js/network"
	export default {
		data() {
			return {
				classlist: [],
				page: 1,
				isshowempty:false,
				noscroll: true,
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				Object.assign(this.$data, this.$options.data())
				let self = this
				console.log(this.$root.$mp.query)

				if(this.$root.$mp.query.type == 'tags') {
					requests({
						url: 'https://tp5.blver.cn/api/goods/getGoodsData', //仅为示例，并非真实的接口地址
						data: {
							page: 1,
							each: 6,
							type: self.$root.$mp.query.type,
							id: self.$root.$mp.query.id
						},
						header: {
							'content-type': 'application/json', // 默认值
							'content-type': 'application/x-www-form-urlencoded' // 默认值
						},
						success: function(res) {
							console.log(res)
							if(res.data.status=='error'){
								self.isshowempty=true
							}else{
								self.isshowempty=false
								self.classlist = res.data.msg
							}
							

						}
					})
				} else if(this.$root.$mp.query.type == 'spec') {
					requests({
						url: 'https://tp5.blver.cn/api/goods/getGoodsData', //仅为示例，并非真实的接口地址
						data: {
							page: 1,
							each: 6,
							type: self.$root.$mp.query.type,
							name: self.$root.$mp.query.name
						},
						header: {
							'content-type': 'application/json' // 默认值
						},
						success: function(res) {
						
							if(res.data.status=='error'){
								self.isshowempty=true
							}else{
								self.isshowempty=false
								self.classlist = res.data.msg
							}
						}
					})
				}

			},
			scrollLoading() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1
				if(this.$root.$mp.query.type == 'tags') {
					requests({
						url: `https://tp5.blver.cn/api/goods/getGoodsData`,
						
						data: {
							page: self.page,
							each: 6,
							type: self.$root.$mp.query.type,
							id: self.$root.$mp.query.id
						},
						header: {
							'content-type': 'application/json' // 默认值
						},
						success: function(res2) {
							console.log(res2)
							if(res2.data.status== "error") {
								wx.showToast({
									duration: 2000,
									icon: 'none',
									title: '没有更多了',
								})

								self.noscroll = false
								return
							}
							let newarr = self.classlist.concat(res2.data.msg)
							self.classlist = newarr
						}
					})
				} else if(this.$root.$mp.query.type == 'spec') {
					requests({
						url: `https://tp5.blver.cn/api/goods/getGoodsData`,
						
						data: {
							page: self.page,
							each: 6,
							type: self.$root.$mp.query.type,
							name: self.$root.$mp.query.name
						},
						header: {
							'content-type': 'application/json' // 默认值
						},
						success: function(res2) {
							console.log(res2)
							if(res2.data.status== "error") {
								wx.showToast({
									duration: 2000,
									icon: 'none',
									title: '没有更多了',
								})

								self.noscroll = false
								return
							}
							let newarr = self.classlist.concat(res2.data.msg)
							self.classlist = newarr
						}
					})
				}

			},
		}
	}
</script>

<style scoped lang="scss">
.scrollarea {
		height: 100vh;
	}
	.listDiv {
		width: 100%;
		max-width: 620px;
		margin: 0px auto;
		margin-top: 0px;
		margin-bottom: 96rpx;
	}
	
	.listul {
		width: 100%;
		padding: 0px;
		margin: 0px auto;
	}
	
	.listul li {
		list-style-type: none;
		text-align: center;
		float: left;
		width: 49.5%;
		height: auto;
		background-color: #FFF
	}
	
	.listul li .prodiv {
		width: 100%;
		min-width: 96px;
		min-height: 124px;
		margin: 0px auto;
		text-align: center;
		padding-top: 4px;
		padding-bottom: 5px;
		max-width: 100%;
		max-height: none;
	}
	
	.listul li .prodiv img {
		border: 0px #CCCCCC solid;
		width: 100%;
		max-width: 100%;
		max-height: none;
		min-height: 122px;
		min-width: 94px;
	}
	
	.listul li .prodiv a {
		color: #666;
		text-decoration: none
	}
	
	.listul li .prodiv .imgdiv {
		width: 100%;
		max-width: 100%;
		/*max-width:98%;*/
		max-height: none;
		min-width: 94px;
		min-height: 122px;
		margin: 0px auto
	}
	
	.listul li .prodiv .protext {
		width: 98%;
		clear: both;
		margin: 0px auto;
		display: block;
	}
	
	.listul li .prodiv .proname {
		line-height: 22px;
		height: 22px;
		color: #333;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		padding-left: 5px;
	}
	
	.listul li .prodiv .proname a {
		color: #333;
		font-size: 14px;
		font-family: 微软雅黑;
		line-height: 22px;
	}
	
	.listul li .prodiv .prodesc {
		height: 22px;
		color: #999;
		font-size: 12px;
		text-align: left;
		overflow: hidden;
		padding-left: 5px;
	}
	
	.listul li .prodiv .prodesc a {
		color: #999;
		font-size: 14px;
		font-family: 微软雅黑;
		line-height: 22px;
	}
	
	.listul li .prodiv .proprice {
		text-align: left;
		color: #F00;
		font-size: 15px;
		margin-top: 0px;
		width: 55%;
		float: left
	}
	
	.listul li .prodiv .addcart {
		width: 40%;
		float: right;
		height: 30px;
	}
	
	.listul li .prodiv .addcart a {
		border: 1px #348B16 solid;
		padding: 3px 10px 3px 10px;
		border-radius: 3px;
		color: #348B16;
		font-size: 13px;
	}
	
	.listul li .prodiv .addico {
		width: 33%;
		float: left;
		height: 40px;
		line-height: 40px;
	}
	
	.listul li .prodiv .addico img {
		max-height: 22px;
		max-width: 22px;
		min-height: 22px;
		min-width: 22px;
		margin-top: 8px
	}
	
	.hot_bq {
		position: absolute;
		right: 6px;
		top: 6px;
		z-index: 100;
		image {
			width: 120rpx;
		}
	}
	
	.goods-search-list-nav {
		display: block;
		width: 100%;
		height: 39px;
		background: rgba(255, 255, 255, 0.95);
		border-bottom: solid 1px #EEE;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
	}
	
	.goods-attr {
		width: auto;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
	}
	
	.goods-attr .cur {
		background: rgb(196, 0, 0);
	}
	
	.goods-attr .swiper-slide {
		width: auto !important;
		float: left;
		font-size: 14px;
		;
		padding: 10px 4px;
		;
		text-align: center;
	}
	
	.goods-attr .swiper-slide a {
		color: #fff !important;
	}
	
	.goods-attr .swiper-slide {
		width: auto !important;
		float: left;
		font-size: 14px;
		;
		padding: 10px 4px;
		;
		text-align: center;
	}
	
	.goods-attr .swiper-slide a {
		color: #fff !important;
	}
	
	.goods-attr-more {
		position: absolute;
		width: 15%;
		font-size: 13px;
		;
		right: 0;
		text-align: center;
		line-height: 38px;
		;
		z-index: 999;
		background-color: #FE2960;
	}
	
	.goods-attr-more a {
		color: #fff !important;
	}
	
	.goods-search-list-nav ul {
		font-size: 0;
		display: block;
		width: 100%;
		float: left;
	}
	
	.goods-search-list-nav ul li:first-child {
		width: 25%;
	}
	
	.goods-search-list-nav ul li {
		vertical-align: top;
		display: inline-block;
		width: 25%;
	}
	
	.goods-search-list-nav ul li a {
		font-size: 13px;
		color: #888;
		line-height: 39px;
		text-align: center;
		display: block;
		height: 39px;
	}
	
	.goods-search-list-nav ul li a.current {
		color: #ED5564;
	}
	
	.goods-search-list-nav ul li a.current i {
		border-color: #ED5564 transparent transparent transparent;
	}
	
	.goods-search-list-nav ul li a.up i {
		border-color: transparent transparent #ED5564 transparent !important;
	}
	
	.goods-search-list-nav ul li a i {
		font-size: 0px;
		line-height: 0;
		vertical-align: middle;
		display: inline-block;
		width: 0px;
		height: 0px;
		margin-left: 4px;
		border-width: 4px;
		border-color: #AAA transparent transparent transparent;
		border-style: solid dashed dashed dashed;
	}
	
	.listtitle ul .r {
		background-color: #FE2960;
		color: #FFF;
	}
</style>